<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>品牌列表案例</title>
    <!-- 导入 bootstrap 的样式表 -->
    <!-- https://v4.bootcss.com/docs/components/forms/#switches -->
    <link rel="stylesheet" href="./lib/bootstrap.css" />
    <style>
      :root {
        font-size: 13px;
      }

      body {
        padding: 8px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 卡片区域 -->
      <div class="card">
        <h5 class="card-header">添加品牌</h5>
        <div class="card-body">
          <!-- 添加品牌的表单 -->
          <!-- 设置阻止默认提交事件 -->
          <form class="form-inline" @submit.prevent>
            <div class="input-group mb-2 mr-sm-2">
              <div class="input-group-prepend">
                <div class="input-group-text">品牌名称</div>
              </div>
              <!-- 文本输入框 -->
              <!-- 双向绑定brandname为双向文本.trim 防止空字符-->
              <input type="text" class="form-control"  v-model.trim="brandname" @keyup.esc="brandname=''" />
            </div>

            <!-- 提交表单的按钮 -->
            <!-- 为按钮绑定点击事件处理函数 -->
            <button  type="submit" class="btn btn-primary mb-2" @click="addNewBrand">添加品牌</button>
          </form>
        </div>
      </div>

      <!-- 品牌列表 -->
      <table class="table table-bordered table-striped mt-2">
        <thead>
          <tr>
            <th>#</th>
            <th>品牌名称</th>
            <th>状态</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <!-- 表格的主体区域 -->
        <tbody>
          <!-- TODO：循环渲染表格的每一行数据 -->
          <tr v-for="(item,index) in brandlist" :key="item.id">
            <td>{{index+1}}</td>
            <td>{{item.brandname}}</td>
            <td>
              <div class="custom-control custom-switch">
                <input type="checkbox" class="custom-control-input" :id="item.id" v-model="item.state">
                <label class="custom-control-label" :for="item.id" v-if="item.state">已启动</label>
                <label class="custom-control-label" :for="item.id" v-else="item.state">已禁用</label>
              </div>
            </td>
            <td>{{item.addtime}}</td>
            <td>
              <a href="#">删除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
      const vm=new Vue({
        el:'#app',
        data:{
          // 设置brandname默认为空
          brandname:'',
          // 用nextId记录下一个可用id
          nextId:4,
          brandlist:[
            {id:1,brandname:'宝马',state:true,addtime:new Date()},
            {id:2,brandname:'奔驰',state:true,addtime:new Date()},
            {id:3,brandname:'奥迪',state:false,addtime:new Date()},
          ]
        },
        // 添加新的品牌数据 首先判断拼配名字不能为空，否则做一个添加的操作 添加完成后 重置名字为空 nextId自增+1
        methods: {
          addNewBrand(){
            if(!this.brandname)return alert('名字不能为空')
            this.brandlist.push({
              id:this.nextId,
              brandname:this.brandname,
              state:true,
              addtime:new Date()
            })
            this.brandname='',
            this.nextId++

            }
          }
        },
      )
    </script>
  </body>
</html>
